<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('list')" label="弹窗消息管理" name="one">
        <dashboard-dialog-list v-show="activeTab === 'one'" />
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('create')" label="新建弹窗消息" name="create">
        <!--<el-tabs type="border-card" :value="subActiveTab" @tab-click="subChangeTab">-->
        <!--<el-tab-pane name="normal" label="常规消息">-->
        <dashboard-normal-notice/>
        <!--</el-tab-pane>-->
        <!--<el-tab-pane label="换银行卡消息" name="bank">-->
        <!--<dashboard-bank-notice />-->
        <!--</el-tab-pane>-->
        <!--</el-tabs>-->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import DashboardDialogList from './dashboardDialogList';
  import DashboardNormalNotice from './dashboardNormalNotice';
  import DashboardBankNotice from './dashboardBankNotice';
  import {tabs} from '@/build';

  export default {
    name: "dashboard-notice",

    components: {
      DashboardDialogList,
      DashboardNormalNotice,
      DashboardBankNotice
    },

    mixins: [tabs],

    data() {
      return {
        activeTab: 'one',
        subActiveTab: 'normal',
      }
    },
    mounted() {
      this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, '弹窗消息管理', true)});
    },
    methods: {
      subChangeTab(tabs) {
        this.subActiveTab = tabs.name
        this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, tabs.label, true)});
      },
      changeTab(tabs) {
        this.activeTab = tabs.name
        this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, tabs.label, true)});
      }
    }
  }
</script>

<style scoped>

</style>
